<template>
  <div :id="id" :style="{ height:height,width:width }" />
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "1270px",
    },
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chart: null,
      legendData: [],
      echartData: [],
      plusImg:'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm192 472c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z',
      minusImg:'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm192 472c0 4.4-3.6 8-8 8H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h368c4.4 0 8 3.6 8 8v48z',
      emptyImg:'circle'
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart = null;
  },
  methods: {
    getSymbolImg(item){
      return `image://${item.children && item.children.length ? minusImg : item.children_bak && item.children_bak.length ? plusImg : emptyImg}`;
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      const treeData1 = {
        name: "董事会结构",
        symbolSize: 10,
        itemStyle: {
          color: "#1678fd",
        },
        label: {
          fontSize: 14,
        },
        children: [
          {
            name: "董事会独立性",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            }
          },
          {
            name: "董事会专业性",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
        ],
      };
      const treeData2 = {
        name: "董事会行为",
        symbolSize: 10,
        itemStyle: {
          color: "#1678fd",
        },
        label: {
          fontSize: 14,
        },
        children: [
          {
            name: "专门委员会会议",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            }
          },
          {
            name: "董事会会议",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            }
          },
          {
            name: "股东大会",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
          {
            name: "与党委的关系",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
        ],
      };
      const treeData3 = {
        name: "社会责任",
        symbolSize: 10,
        itemStyle: {
          color: "#1678fd",
        },
        label: {
          fontSize: 14,
        },
        children: [
          {
            name: "社会",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
          {
            name: "股东",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
          {
            name: "员工",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          }
        ],
      };
      const treeData4 = {
        name: "信息披露",
        symbolSize: 10,
        itemStyle: {
          color: "#1678fd",
        },
        label: {
          fontSize: 14,
        },
        children: [
          {
            name: "披露日期",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            }
          },
          {
            name: "披露一致性",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
          {
            name: "内部控制",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
          {
            name: "当初审计报告意见",
            itemStyle: {
              color: "#ffad3d",
            },
            symbolSize: 8,
          },
        ],
      };
      const treeData5 = {
        name: "董事薪酬、激励及约束",
        symbolSize: 10,
        itemStyle: {
          color: "#1678fd",
        },
        label: {
          fontSize: 14,
        },
        children: [
          {
            name: "非独立董事薪酬与激励",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
          {
            name: "独立董事津贴",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
          {
            name: "董事责任",
            symbolSize: 8,
            itemStyle: {
              color: "#ffad3d",
            },
          },
        ],
      };
      const treeData = {
        name: "董事会指标体系董事会指标体系董事会指标体系",
        symbolSize: 12,
        label: {
          fontSize: 16,
          backgroundColor: '#ffad3d',
        },
        itemStyle:{
          color:"#1678fd",
        },
        children: [treeData1, treeData2, treeData3, treeData4, treeData5],
      };
      const treeChartOpt = {
        series: [
          {
            type: "tree",
            left: "18%",
            right: "20%",
            top: "1%",
            bottom: "2%",
            orient: "LR", //方向
            // initialTreeDepth: 1, //深度
            symbol: "circle",
            itemStyle: {
              color: "#ffad3d",
              borderColor: "rgba(255,255,255,.1)",
            },

            lineStyle: {
              width: 1,
              curveness: 0.5,
            },
            label: {
              normal: {
                position: 'left',
                verticalAlign: 'middle',
                distance:70,
                align: 'center',
                backgroundColor: '#1678fd',
                color: '#fff',
                padding:[10,10,10,10],
                borderRadius:15,
                width:100,
                formatter: function (params) {         
                    return params.name.replace(/[^\x00-\xff]/g,"$&\x01").replace(/.{12}\x01?/g,"$&\n").replace(/\x01/g,"");
                },
                rich: {
                  box: {
                    height: 30,
                    color: '#fff',
                    align: 'center',
                    borderRadius: 30
                  }
                }
              }
					},
					leaves: {
						label: {
							normal: {
                formatter: function (params) {    
                    return params.name;
                },
								position: 'right',
                verticalAlign: 'middle',
                distance:0,
                align: 'left',
                color: '#000',
								backgroundColor: 'rgba(255,255,255,.1)',
								rich: {
									box: {
										height: 18,
										color: '#333',
										align: 'center'
									}
								}
							}
						}
					},
            data: [treeData],
          },
        ],
      };
      this.chart.setOption(treeChartOpt);
      var _this = this
      this.chart.on("click", function (param) {
        // param.data.children.push({name:"子部门测试",children:[]});
        
        //treeData.label.backgroundColor = "#000"
        console.log(param)
        // _this.chart.setOption(treeChartOpt);
        _this.chart.clear()
        _this.chart.setOption(treeChartOpt)
        // if (param.data.children === undefined) {
        //   window.open("http://www.baidu.com", "_blank");
        // }
      });
    },
  },
};
</script>
<style lang='stylus' scoped>
.chartsClass {
  padding-left: 1.2rem;
}
</style>
</script>